<template>
	<view class="proDea">
		<!-- 轮播图 -->
		<view class="home_swiper">
			<swiper autoplay indicator-dots circular>
				<swiper-item class="home_swiper_item" v-for="(item,index) in getImages" :key="index">
					<image class="img" :src="item" mode="heightFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<text>产品名称：</text>
			<text>{{detaildata.name}}</text>
		</view>
		<view class="info">
			<text>单位：</text>
			<text>{{detaildata.unit}}</text>
		</view>
		<view class="info">
			<text>参数：</text>
			<text>{{detaildata.parameter}}</text>
		</view>
		<view class="info">
			<text>功能介绍：</text>
			<text>{{detaildata.introduce}}</text>
		</view>
	</view>
</template>

<script>
	import {
		getProductDetail
	} from "@/common/request.js"

	export default {
		data() {
			return {
				proId: '',
				detaildata:{}
			};
		},
		computed:{
			getImages(){
				return (this.detaildata.images || "").split(" ")
			}
		},
		onLoad(options) {
			this.proId = options.id
			getProductDetail(this.proId).then(res => {
				this.detaildata=res
			})
		}
	}
</script>

<style lang="scss" scoped>
	.proDea{
		margin: 30rpx;
		/* 轮播图 */
		.home_swiper {
			swiper {
				height: 420rpx;
		
				.home_swiper_item {
					text-align: center;
					.img {
						display: inline-block;
						height: 100%;
					}
				}
			}
		}
		.info{
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			text:nth-of-type(1){
				flex: 2;
				// width: 200rpx;
				// display: inline-block;
			}
			text:nth-of-type(2){
				flex: 5;
			}
		}
	}
</style>
